<template>
  <view class="">
    <view class="product-card" @click="proxy.$refs.popup.open()">
      <view class="title">{{ $t('product.text_attributes') }}</view>
      <uni-icons type="forward" size="16" color="#999"></uni-icons>
    </view>

    <uni-popup ref="popup" class="popup-box" type="bottom" :safe-area="false">
      <view class="popup-wrap">
        <view class="title">{{ $t('product.text_attributes') }}</view>
        <scroll-view scroll-y="true" @touchmove.stop >
          <view class="popup-container">
            <view class="attributes-wrap">
              <view v-for="item, index in props.attributes" :key="index" class="item">
                <view class="item-title">{{ item.attribute_group_name }}</view>
                <view class="child-wrap">
                  <view v-for="child, child_index in item.attributes" :key="index+'-'+child_index" class="child">
                    <view class="child-title">{{ child.attribute }}</view>
                    <view class="child-text">{{ child.attribute_value }}</view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
        <view class="page-fixed-bottom" @click="proxy.$refs.popup.close()">
          <view class="btn-primary">{{ $t('common.confirm') }}</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
const { proxy } = getCurrentInstance()
import { t } from '@/locale/index'
const props = defineProps({
  attributes: {
    type: Array,
    default: [],
  },
})
</script>

<style lang="scss" scoped>
.product-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 10px;
  margin-bottom: 10px;
  &:active {
    background-color: #f5f5f5;
  }

  > .title {
    font-weight: bold;
    font-size: 28rpx;
    color: #333;
  }
}

.popup-box {
  z-index: 9999;
}

.popup-wrap {
  height: calc(80vh - 44px);
  background-color: #fff;
  padding-bottom: env(safe-area-inset-bottom);
  border-radius: 30rpx 30rpx 0 0;
  z-index: 9999999;

  .popup-container {
    height: calc(80vh - 164px);
    padding: 20rpx 20rpx 0;
    z-index: 9999999;
  }

  > .title {
    text-align: center;
    font-size: 32rpx;
    padding: 20rpx 0;
    border-radius: 30rpx 30rpx 0 0;
    background-color: #fff;
  }
}

.attributes-wrap {
  border: 1px solid #eee;
  border-bottom: none;
  color: #555;

  .item {
    .item-title {
      padding: 20rpx;
      font-weight: bold;
      border-bottom: 1px solid #eee;
      color: #333;
    }

    .child-wrap {
      .child {
        display: flex;
        border-bottom: 1px solid #eee;

        .child-title {
          padding: 20rpx;
          border-right: 1px solid #eee;
          flex: 0 0 160rpx;
        }

        .child-text {
          padding: 20rpx;
        }
      }
    }
  }
}
</style>
